<template>
  <div class="list">
    <v-loading v-if="loading"></v-loading>
    <!-- start 焦点图-->
    <div class="mod-slider" style="visibility: visible;">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="swiper in swiperList">
            <img :src="swiper.img" />
          </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
      </div>
    </div>
    <!-- end 焦点图-->
    <ul class="panel-songslist">
      <li class="panel-songslist-item" v-for="(song,index) in songList" @click.stop="playAudio(index)">
        <div class="panel-songs-item-name">
          <span>{{song.title}}</span>
        </div>
        <div class="panel-songs-item-download">
          <i></i>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import list_index from '../../jsons/list_index'
import vLoading from '../../components/common/loading'

export default {
  name: 'home_list',
  data() {
    return {
      loading:true,
      songList: [],
      swiperList:[],
    }
  },
  components: {
    vLoading
  },
  created(){
    this.get();
  },
  mounted() {},
  methods: {
    get(){
      this.loading = true;
      this.parseData(list_index)
    },
    parseData(res){
      setTimeout(()=> {
        this.loading = false;
        this.swiperList = res.swiper;
        this.songList = res.home;
        this.$nextTick(function () {
          var mySwiper = new Swiper('.swiper-container', {
            // loop: true,
            autoplay: 3000,
            pagination: '.swiper-pagination', // 分页器
            paginationClickable: true // 分页器指示点控制Swiper切换
          });
        })
      }, 1000);
    },
    playAudio(index){
      var hash = this.songList[index].hash;
      this.$store.commit('setSongList', this.songList);
      this.$store.commit('setSongIndex', index);
      this.$store.dispatch('getSong', hash);
      this.$store.dispatch('getLrc', hash);
    }
  }
}
</script>

<style lang="stylus"  scoped>
  .mod-slider
    width: 100%;
    margin-top: .3571rem;
    background: #fff;
    overflow: hidden;
    visibility: hidden;
    position: relative;
  .panel-songslist
    padding-left: .7143rem;
    .panel-songslist-item
      width: 100%;
      height: 4.0714rem;
      border-bottom: 1px solid #e5e5e5;
      position: relative;
      display: table;
      .panel-songs-item-name
        width: 100%;
        padding-right: 2.657rem;
        display: table-cell;
        vertical-align: middle;
        padding-left: .3571rem;
        cursor: pointer;
        text-align:left;
        font-size: 1rem;
        line-height: 1.4;
        font-weight: 500;
        box-sizing: border-box;
    .panel-songs-item-download
      position: absolute;
      top: 0;
      right: 0;
      width: 2.5rem;
      height: 100%;
      cursor: pointer;
      text-align: center;
      i 
        width: 1.0357rem;
        height: 1.0814rem;
        margin-top: 1.5rem;
        display: inline-block;
        background: url(../../assets/images/index/download_icon_2.png) no-repeat;
        background-size: 100%;
</style>
